<template>
  <section>
    <div class="userimg">
      <cube-upload
        ref="upload"
        :auto="ifUpload"
        :action="action"
        :max="1"
        :simultaneous-uploads="1"
        @file-removed = "filesRemoved"
        @file-submitted="fileSubmitted" />
    </div>
    <span style="display:inline-block;text-align: center;line-height:10px;font-size: 13px;width: 50%;margin: 0 auto;padding: 0;">请上传您的真实头像</span>

    <div class="message">
      <p class="myrow">
        <span class="w4">姓名</span>
        <cube-input
          v-model="username"
          class="w3">
        </cube-input>
      </p>
      <p class="myrow">
        <span class="w4">性别</span>
        <cube-select
          v-model="gender"
          :options="sex">
        </cube-select>
      </p>
      <p class="myrow">
        <span class="w4">所属医院</span>
        <cube-select
          v-model="hospital"
          :options="hospName">
        </cube-select>
      </p>
      <p class="myrow">
        <span class="w4">您的职称</span>
        <cube-select
          v-model="title"
          :options="Titles">
        </cube-select>
      </p>
    </div>
    <p class="next" @click="next">下一步</p>
  </section>
</template>

<script>
  import {getUserList} from "../../api/api"
  import { Toast } from 'mint-ui';
  import axios from 'axios'
  import qs from 'qs'
    export default {
        props: [],
        name: 'app',
        data(){
            return {
              username:"",
              ResultUrl:"",
              hospital:"华西医院肺癌中心",
              title:"主任医师",
              gender: '', //性别
              hospName:[
                { text: '华西医院肺癌中心', value: "华西医院肺癌中心" },
                ],
              Titles:[
                { text: '住院医师', value: "住院医师" },
                { text: '主治医师', value: "主治医师" },
                { text: '副主任医师', value: "副主任医师" },
                { text: '主任医师', value: "主任医师" },
              ],
              sex: [
                {
                  text: "男",
                  value: 0
                },
                {
                  text: "女",
                  value: 1
                }
              ],
              ifUpload:false,
              reportDateTime: "请选择日期",
              action: {
                target: '//jsonplaceholder.typicode.com/photos/',
                prop: 'base64Value'
              }
            }
        },
        computed: {},
        components: {},
        created(){
        },
        methods: {
          filesRemoved(){
              this.ResultUrl="";
          },
          fileSubmitted: function (file) {
            console.log('图片列表====>', this.$refs.upload.files);
            let formData = new FormData();
            formData.append('file', this.$refs.upload.files[0].file);
            formData.append('name', "file");
            formData.append('filename', "2.jpg");
            formData.append('Content-Type', "image/jpg");
            formData.append('Content-Disposition', "form-data");
            let config = {
              headers: {
                'Content-Type': 'multipart/form-data;boundary = '
              }
            }
            axios.post('http://www.bestckd.com/lungtest/api/remote/upload', formData, config).then(res=> {
//            axios.post('http://171.213.9.101:7654/api/remote/upload', formData, config).then(res=> {
              this.ResultUrl=res.data.Result;
            })

          },
          next(){
              if(this.username&&this.ResultUrl&&this.gender!=null){
                let info={AvatarUrl: this.ResultUrl,
                  Name:this.username,
                  HospitalName:this.hospital,
                  JobTitle:this.title,
                  Gender:this.gender};
                localStorage.setItem("info",JSON.stringify(info));
                this.$router.push("/speciality");
              }

              else{
                Toast({
                  message: '填写完整信息',
                  position: 'middle',
                  duration: 1000
                });
              }
          },
          getUserList(){
            getUserList({
              UserId:JSON.parse(localStorage.getItem("user")).Id,
              Name:"",
              PageSize:100,
              CurrentPage:1,
            }).then(res=>{
                console.log(res);
                if(res.data.Result[0].ApprovalStatus==2){
                  let result=res.data.Result[0];
                  this.username=result.Name;
                  this.title=result.JobTitle;
                  this.hospital=result.HospitalName;
                  this.gender=result.Gender;
                  this.ResultUrl=result.AvatarUrl;
                  var img={
                    url:this.$photoUrl+result.AvatarUrl
                  };
                  this.$refs.upload.files.push(img);
                  localStorage.setItem("GoodATCancer",result.GoodATCancer);//癌种信息
                  localStorage.setItem("CertifiedUrl",result.CertifiedUrl);//癌种
                }
            });
          }
        },
        mounted() {
            console.log(this.$photoUrl );
             this.getUserList();
        },
        destroyed(){
        }
    }
</script>

<style lang="scss" scoped>
  section{
    background-color: white;
  }
  .userimg{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto;
    margin-top:20%;
  }
  .message{
    width: 90%;
    position: relative;
    margin: 0 auto;
    margin-top: 50px;
  }
  .myrow {
    height: 50px;
    line-height: 52px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content:flex-start
  }
  select{
    background: transparent;
    border: none;
    width:70%;
    height:78%;
    font-size: 15px;
    appearance:none;
    text-align: center !important;
    text-align-last: center !important;
    outline: none;
  }
  .next{
    width: 90%;
    height: 40px;
    margin-top:60px;
    margin-left: 5%;
    border-radius: 5px;
    color: white;
    text-align: center;
    line-height: 45px;
    letter-spacing: 3px;
    background-color: rgba(0, 146, 252, 0.5);
  }.w3{
     display: inline-block;
     outline: none
   }
  .w4{
    min-width: 120px;;
  }
  .cube-input {
    position:static
  }
  .cube-select{
    padding: 16px 20px 10px 10px;
    position:static;
    width:100%;
    text-align: left;
  }
  .cube-select-icon{
    display: none;
  }
  .cube-input-field{
    height:50px;
  }
</style>
